<form (ngSubmit)="submitForm()" [formGroup]="validateForm" nz-form>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username" nzRequired>UserName</nz-form-label>
    <nz-form-control [nzErrorTip]="userErrorTpl" [nzSm]="14" [nzXs]="24" nzHasFeedback nzValidatingTip="Validating...">
      <input formControlName="username" id="username" nz-input/>
      <ng-template #userErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          Please input your username!
        </ng-container>
        <ng-container *ngIf="control.hasError('duplicated')">
          该用户名已存在！
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>Password</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input your password!">
      <input (ngModelChange)="updateConfirmValidator()" formControlName="password" id="password" nz-input
             type="password"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>Confirm Password</nz-form-label>
    <nz-form-control [nzErrorTip]="errorTpl" [nzSm]="14" [nzXs]="24">
      <input formControlName="checkPassword" id="checkPassword" nz-input type="password"/>
      <ng-template #errorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          Please confirm your password!
        </ng-container>
        <ng-container *ngIf="control.hasError('confirm')">
          Two passwords that you enter is inconsistent!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="email">E-mail</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid E-mail!">
      <input formControlName="email" id="email" nz-input/>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname">
          <span>
            NickName
            <i nz-icon nz-tooltip nzTheme="outline"
               nzTitle="昵称：用于显示，登陆使用的是 UserName" nzType="question-circle"></i>
          </span>
    </nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input your nickname!">
      <input formControlName="nickname" id="nickname" nz-input/>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber">Phone Number</nz-form-label>
    <nz-form-control
      [nzSm]="14"
      [nzValidateStatus]="validateForm.controls['phoneNumber']"
      [nzXs]="24"
      nzErrorTip="Please input your phone number!"
    >
      <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
        <ng-template #addOnBeforeTemplate>
          <nz-select class="phone-select" formControlName="phoneNumberPrefix">
            <nz-option nzLabel="+86" nzValue="+86"></nz-option>
            <nz-option nzLabel="+87" nzValue="+87"></nz-option>
          </nz-select>
        </ng-template>
        <input formControlName="phoneNumber" id="'phoneNumber'" nz-input/>
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item class="register-area" nz-row>
    <nz-form-control [nzOffset]="6" [nzSpan]="14">
      <label formControlName="agree" nz-checkbox>
        <span>I have read the <a>agreement</a></span>
      </label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item class="register-area" nz-row>
    <nz-form-control [nzOffset]="6" [nzSpan]="14">
      <button nz-button nzType="primary">Register</button>
    </nz-form-control>
  </nz-form-item>
</form>
